<template>
  <div class="articleDetails back-white">
    <div class="articleTopBar m-list list-justify">
      <div class="m-list-name">
        <span class="sTitle x-co3-5">文章详情</span>
      </div>
      <div class="m-list-inner">
        <el-button type="text" class="dib vam" icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button>
      </div>
    </div>
    <el-container>
      <el-main>
        <div class="x-item x-item-none">
          <div class="articleDetails-container">
            <div class="articleDetails-aside x-fs-065">
              <p class="mb075"><span class="fw600 x-co3-4">标题: </span><span class="x-co1">{{detailInfo.title}}</span></p>
              <p class="mb075"><span class="fw600 x-co3-4">参与的话题: </span><span >{{detailInfo.topics.title}}</span></p>
              <p class="mb075"><span class="fw600 x-co3-4">日期: </span><span class="">{{detailInfo.create_time}}</span></p>
            </div>
            <div class="articleDetails-content">
                <div class="readers x-fs-070 x-co3-4">
                    <i class="el-icon-star-on"></i> <span class="mr075">收藏 {{detailInfo.collects.length}}</span> 
                    <i class="el-icon-share"></i> <span>分享 {{detailInfo.shares.length}}</span>
                </div>
                <div class="x-fs-070 x-co3-5 lh080 articleDetails-cbox">
                    {{detailInfo.content}}
                </div>
                <div class="articleDetails-img clear-both">
                    <div class="img-box float-left" v-for="(item,index) in detailInfo.imgList" :key="index" v-show="item">
                        <img :src="imgUrl+item">
                    </div>
                </div>
                <div class="comment">
                    <div class="title">全部评论{{detailInfo.comments}}</div>
                    <div class="content">
                        <div class="group-list" v-for="(list,indexList) in sendUserInfo">
                            <div class="head clear-both">
                                <div class="img-box float-left" ><img :src="imgUrl+list.sendUser.level_images"></div>
                                <div class="float-left">
                                    <span class="name">{{list.sendUser.user_name}}</span>
                                    <span class="item">{{list.create_time}}</span>    
                                </div>
                            </div>
                            <div class="main">
                                <div class="main-text">{{list.content}}</div>
                                <div class="more-text" v-show="list.commentSons.length!=0">
                                    <div class="more-main-text" v-for="(sons,indexSon) in list.commentSons">
                                        <span class="name">{{sons.sonSendUser.user_name}}</span>
                                        <span class="huifu">回复</span>
                                        <span class="name">{{sons.get_username}}</span>：
                                        <span class="neirong">{{sons.content}}</span>
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>

  </div>
</template>
<script type="text/ecmascript-6">
  import * as api from '../../../api/api';
  import{IMG_ROOT}from '../../../config';
  export default{
    data(){
      return {
            imgUrl:IMG_ROOT,
            articleId: this.$route.query.id, //文章id
            detailInfo: {},
            sendUserInfo:{},
      }
    },
 
    methods:{
      //获得帖子详情
        getstateDetail(id){
            let vm = this;
            let body={
                model: "Forums",
                with:{
                    "0":"topics",
                    "1":"collects",
                    "2":"shares",
                    "3":"comments"
                },
                condition:{
                    forum_id:id
                }
            };
            api.getDataDetail(body).then(res=>{
                if(res.data.code==200){ 
                    vm.detailInfo=res.data.data; 
                    vm.detailInfo.imgList=vm.detailInfo.images.split(',');
                }
            })
        },
        //帖子评论列表
        getForumCommentsList(id){
            let vm = this;
            let body={
                model: "ForumComments",
                with:{
                    "0":"sendUser",
                    "1":"commentSons"
                },
                condition:{
                    forum_id:id,
                    parent_id:0
                }
            };
            api.getDateList(body).then(res=>{
                if(res.data.code==200){
                    vm.sendUserInfo=res.data.data.data; 
                }
            })
        },
    },
    beforeRouteEnter:function(to,from,next) {    //路由生命周期
        next(vm => { 
            if(vm.$route.query.forumId){
                vm.getstateDetail(vm.$route.query.forumId);
                vm.getForumCommentsList(vm.$route.query.forumId);
            } 
        })
    },
}
</script>
<style lang="scss" scoped>
  .articleTopBar{
    padding: 10px 25px;
    background: #f2f2f2;
  }
  .articleTopBar .sTitle{
    position: relative;
    font-size: 14px;
    padding-left: 15px;
  }
  .articleTopBar .sTitle:after{
    position: absolute;
    left:0;
    width: 2px;
    background: #989898;
    height: 18px;
    top: -4px;
    content: " "
  }
  .articleDetails-container{
    padding-left: 300px;
    position: relative;
    border: 1px solid #d9d9d9;
    min-height: 400px;
  }
  .articleDetails-aside{
    position: absolute;
    left: 0;
    top:0;
    width: 300px;
    height: 100%;
    border-right: 1px solid #d9d9d9;
    box-sizing: border-box;
    padding: 50px 25px 0;
  }
  .articleDetails-content{
    width: 100%;
    padding: 10px 25px 30px;
  }
  .articleDetails-content .readers{
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 20px;
  }
  .articleDetails-cbox{
    white-space: pre-wrap;
  }
  .articleDetails-img{
      .img-box{
          width:100px;
          height:100px;
          margin:10px;
          img{
              width:100%;
              height:100%;
          }
      }
  }
.comment{
    margin:20px 0;
    .title{
        font-size:16px;
        padding:10px;
        margin:10px 0;
        border-bottom:1px solid #d9d9d9;
        border-top:1px solid #d9d9d9;
    }
    .content{
        .group-list{
            .head{
                .img-box{
                    width:40px;
                    height:40px;
                    margin-right:20px;
                    img{
                        width:100%;
                        height:100%;
                        border-radius:50%;
                    }
                }
                .name{
                    line-height:40px;
                    font-weight:bold;
                    margin-right:20px;
                }
                .item{
                    line-height:40px;
                    color:#666;
                }
            }
            .main{
                padding-left:70px;
                margin-top:10px;
                .main-text{
                    margin:10px 0;
                }
                .more-text{
                    width:100%;
                    background:#efefef;
                    padding:10px 20px;
                    .more-main-text{
                        .huifu{
                            color:#409EFF;
                        }
                        .neirong{
                            font-size:13px;
                        }
                    } 
                }
            }
        }
    }
}
</style>
